<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"


      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html">

    <ui:composition template="template.xhtml">
        <ui:define name="content">
            <p:panel>
                <p:dataTable id="datalist" value="#{compraController.selected.carritos}" var="item" 
                             paginator="true"
                             rows="10"
                             rowsPerPageTemplate="10,30,50" >
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Compras"/>
                        </f:facet>
                        <p:carousel value="#{item.idsProductos}" 
                                    var="car" numVisible="5"
                                    itemStyleClass="carItem" style="width: 100%!important;" circular="true">
                            <h:panelGrid columns="1"  cellpadding="5" columnClasses="label,value" >
                                <h:outputText value="#{car}" />

                            </h:panelGrid>

                            <f:facet name="footer">
                                Son #{item.idsProductos.size()} productos.
                            </f:facet>
                        </p:carousel>
                    </p:column>
                </p:dataTable>
            </p:panel>
        </ui:define>
    </ui:composition>

</html>
